<template>
  <div class="tips-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <el-form-item label="区域高度" v-if="!!(optionModel.callConfig.contentHeight)">
        <el-input-number :min="0" size="small" v-model="optionModel.callConfig.contentHeight" />
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker v-model="optionModel.callConfig.backgroundColor" size="small" show-alpha
          :predefine="predefineColors" />
      </el-form-item>
      <el-form-item label="是否居中" >
        <el-switch v-model="optionModel.callConfig.isCenter" />
      </el-form-item>
      <!-- <el-form-item label="是否滚动">
        <el-switch v-model="optionModel.callConfig.scrollable" />
      </el-form-item> -->
      <el-form-item label="滚动速度(设备比例*19.2*速率/s)" v-if="!!(optionModel.callConfig.scrollable)" class="column-area">
        <el-input-number :precision="1" :min="1" size="small" v-model="optionModel.callConfig.speed"/>
      </el-form-item>
      <el-form-item label="视图模式">
        <el-select
          v-model="optionModel.callConfig['viewMode']"
          placeholder="请选择"
        >
          <el-option
            v-for="item in viewModeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">图标设置</el-divider>
      </div>
      <el-form-item label="图标">
        <!--   :disabled="contentDisabled || sceneInfo" -->
        <el-switch  v-model="optionModel.callConfig.isIcon" />
      </el-form-item>
      <template v-if="optionModel.callConfig.isIcon">
        <el-form-item label="图标大小">
          <el-input-number :min="0" size="small" v-model="optionModel.callConfig.iconFontSize" />
        </el-form-item>
        <el-form-item label="图标颜色">
          <el-color-picker v-model="optionModel.callConfig.iconColor" size="small" show-alpha
                           :predefine="predefineColors" />
        </el-form-item>
      </template>

    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">内容设置</el-divider>
      </div>
      <el-form-item label="字体大小">
        <el-input-number :min="0" size="small" v-model="optionModel.callConfig.defaultFontSize" />
      </el-form-item>
      <el-form-item label="粗细设置">
        <el-select v-model="optionModel.callConfig.defaultFontWeight" placeholder="请选择">
          <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker v-model="optionModel.callConfig.defaultFontColor" size="small" show-alpha
          :predefine="predefineColors" />
      </el-form-item>
    </div>
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">患者设置</el-divider>
      </div>
      <el-form-item label="字体大小">
        <el-input-number :min="0" size="small" v-model="optionModel.callConfig.patientFontSize" />
      </el-form-item>
      <el-form-item label="粗细设置">
        <el-select v-model="optionModel.callConfig.patientFontWeight" placeholder="请选择">
          <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker v-model="optionModel.callConfig.patientFontColor" size="small" show-alpha
          :predefine="predefineColors" />
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker v-model="optionModel.callConfig.patientBackgroundColor" size="small" show-alpha
          :predefine="predefineColors" />
      </el-form-item>
    </div>
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">科室设置</el-divider>
      </div>
      <el-form-item label="字体大小">
        <el-input-number :min="0" size="small" v-model="optionModel.callConfig.deptFontSize" />
      </el-form-item>
      <el-form-item label="粗细设置">
        <el-select v-model="optionModel.callConfig.deptFontWeight" placeholder="请选择">
          <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker v-model="optionModel.callConfig.deptFontColor" size="small" show-alpha
          :predefine="predefineColors" />
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker v-model="optionModel.callConfig.deptBackgroundColor" size="small" show-alpha
          :predefine="predefineColors" />
      </el-form-item>
    </div>
  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "callConfig-editor",

  componentName: "callConfig-editor",

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      optionsInfo: Object(),
      constantDic: constantDic,
      viewModeOptions: [
        {
          value: 1,
          label: "视图1",
        },
        {
          value: 2,
          label: "视图2",
        }
      ],
      predefineColors: types['predefineColors'],
      fontWeightOptions: types['fontWeightOptions'],
    }
  },

  // 组件的所有信息
  optionModel: {
    handler: function (val) {
      this.optionsInfo = val[val.config];
    },
    deep: true,
    immediate: true
  }
}
</script>


<style lang="scss" scoped>
.column-area {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    margin-bottom: 10px;
  }

  :deep(.el-form-item__content) {
    width: 100%;
    margin-left: 0 !important;

    .el-radio-group {
      width: 100%;
      display: flex;
      flex-direction: column;

      .el-radio {
        margin-bottom: 10px;
      }
    }
  }

}
</style>
